<template>
  <lay-layer
    title="绑定API"
    v-model="visible"
    :shade="true"
    :shadeClose="false"
    :shadeOpacity="0.3"
    :maxmin="true"
    :area="['450px']"
    :teleportDisabled="false"
    :btn="actionBtn"
  >
    <Loading :loading="isLoading">
      <lay-form :model="formState" ref="formRef" size="xs" style="width: 88%">
        <lay-form-item label="所属菜单：">
          <lay-input
            :modelValue="info.name + (info.name == detail.name ? '' : '➜' + detail.name)"
            :disabled="true"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="所属路径：">
          <lay-input
            :modelValue="info.path + (detail.action_mark ? '➜' + detail.action_mark : '')"
            :disabled="true"
            allow-clear
          />
        </lay-form-item>

        <lay-form-item label="API绑定" prop="apiIds">
          <lay-panel shadow="hover" style="padding: 10px 0px">
            <lay-tree
              :showCheckbox="true"
              :checkStrictly="false"
              v-model:checkedKeys="formState.apiIds"
              :data="apiList"
              :showLine="true"
              :default-expand-all="true"
              style="max-height: 320px; overflow: auto"
            >
              <!-- 显示名称 -->
              <template #title="{ data }">
                {{ data.name }}
              </template>
            </lay-tree>
          </lay-panel>
        </lay-form-item>
      </lay-form>
    </Loading>
  </lay-layer>
</template>
<script setup>
import { ref, nextTick } from "vue";
import { msgSuccess, msgError } from "@/utils/message";
import {
  one_assign,
  // deepCopy
} from "@/utils/tool";
import * as Api from "@/api/menu/index";
import * as MenuApi from "@/api/menu/api";
// 定义抛出的事件名称
const emit = defineEmits(["callback"]);
// 定义动态数据
const isLoading = ref(false);
const formRef = ref(undefined);

// 定义表单信息，deepCopy解决指针问题
const formState = ref({
  apiIds: [],
});
const visible = ref(false);
const actionBtn = ref([
  {
    text: "提交",
    callback: () => {
      handleSubmit();
    },
  },
  {
    text: "取消",
    callback: () => {
      visible.value = false;
    },
  },
]);
// api列表
const apiList = ref([]);

// 上级信息
const info = ref({});
// 当前信息
const detail = ref(undefined);

// 控制显示
const show = (row, item) => {
  info.value = row;
  detail.value = item;
  visible.value = true;
  //初始化表单信息
  nextTick(() => {
    formRef.value.reset();
    formState.value = one_assign(formState.value, item);
  });
};

// 获取API信息
isLoading.value = true;
MenuApi.list()
  .then((result) => {
    if (result.status == 200) {
      const {
        data: { list },
      } = result;
      apiList.value = list;
    }
  })
  .finally(() => {
    isLoading.value = false;
  });

// 提交
const handleSubmit = () => {
  isLoading.value = true;
  Api.setApis({ menuId: detail.value.menu_id, form: formState.value })
    .then((result) => {
      if (result.status == 200) {
        msgSuccess(result.message);
        visible.value = false;
      } else {
        msgError(result.message);
      }
    })
    .finally(() => {
      emit("callback", "");
      isLoading.value = false;
    });
};

// 导出方法/属性给父组件
defineExpose({ show });
</script>
